<template>
    <n-card class="author-info">
        <div class="item-citation">
            <div>
                <n-text strong style="font-weight: bold;">学者</n-text>
            </div>
        </div>
        <div class="item-content">
            <div class="info-name">
                <n-text>{{ info.name }}</n-text>
            </div>
            <div>
                <n-text
                    italic
                    type="warning"
                    @click="jump_blank('Org', info.org.id)"
                    style="cursor: pointer;"
                >{{ info.org.name }}</n-text>
            </div>
            <div>
                <n-text type="info">{{ info.affiliation }}</n-text>
            </div>
            <div class="info-interest">
                <n-icon size="20" color="#767c82">
                    <elec-icon />
                </n-icon>
                <div v-for="(item, index) in info.interest" :key="index">
                    <n-text v-if="index !== 0">&nbsp;,&nbsp;</n-text>
                    <n-text underline depth="3">{{ item }}</n-text>
                </div>
            </div>
            <div style="float: left;margin-top: 10px;">
                <n-icon size="25" color="#0077C2">
                    <quote-icon />
                </n-icon>
                <n-text style="color:#0077C2">{{ info.quote_time }}</n-text>
            </div>
            <div style="float: right;">
                <n-button color="#58585b" @click="jump_blank('Author', info.id)">详细信息</n-button>
            </div>
        </div>
    </n-card>
</template>

<script setup lang='ts'>
import { LogoElectron as ElecIcon } from '@vicons/ionicons5'
import { FormatQuoteFilled as QuoteIcon } from '@vicons/material'
import { useMessage } from 'naive-ui';
import { useRouter } from 'vue-router';

// 引入路由
const router = useRouter()

// 引入消息函数
const message = useMessage()

const props = defineProps([
    'info'
])

const jump_blank = ((name: string, id: string) => {
    if (id === "") {
        message.warning("十分抱歉，该学者暂未收录")
        return
    }
    let router_data = router.resolve({ name: name, params: { id: id } })
    window.open(router_data.href, '_blank')
})

</script>

<style scoped>
.author-info {
    min-height: 180px;
    box-shadow: 0 5px 8px rgb(0 0 0 / 10%);
    margin-bottom: 20px;
}

.info-name :deep(.n-text) {
    color: #0077c2;
    font-weight: 500;
    font-size: large;
}

.info-interest {
    margin-top: 5px;
    display: flex;
}

.item-citation {
    width: 140px;
    display: inline-block;
    margin-bottom: 0;
}

.item-content {
    display: block;
    width: calc(100% - 140px);
    float: right;
}
</style>